<template>
    <Div>
        <div style="background-color: #d9d9d9;font-size: 30px;"><span style="margin-left: 30px;">我的博客</span></div>
        <div style="margin-top: 20px;margin-left: 30px;"><el-button style="padding: 20px; font-size: 20px;background-color: #666666;color: white">博客首页</el-button> <el-button style="padding: 20px;float: right;font-size: 20px;background-color: #666666;color: white">写文章</el-button></div>
        <el-row>
            <el-col :span="9" v-for="(item, index) in (blog || '').slice((currentPage-1)*PageSize,currentPage*PageSize)" :key="index" :offset="index > 0 ? 3 : 0"
                    style="width: 390px;margin-left: 20px;">
                <el-card style="margin-top: 50px;padding: 0px;">
                    <span style="font-size: 30px;">{{item.cotitle}}</span>
                    <el-button style="float:right;font-size: 15px;color:#409EFF;">作者：{{item.name}}
                    </el-button>
                    <div style="margin-top: 10px;">
                        <el-image style="width:350px;height: 250px;overflow: auto;padding: 0px;"
                                  :src="item.img"></el-image>
                    </div>


                    <div>
                        <router-link :to="{path:'/mybolgs',query:{id:item.id}}">
                            <el-button style="color: #409EFF">阅品文章</el-button>
                        </router-link>
                        <el-button type="danger"  @click="DeleBlog(item.id)" style="float: right" icon="el-icon-delete" circle></el-button>
                        <span style="margin-left: 50px;">{{item.data}}</span>

                    </div>

                </el-card>
            </el-col>
        </el-row>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="pageSizes"
                       :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="totalCount"
                       style="margin-left: 200px;margin-top: 10px;margin-bottom: 20px">
        </el-pagination>
    </Div>
</template>

<script>
    export default {
        name: "blogs",
        data(){
            return{

                Cid:'',
                userInfo:{},

                blog:[{}],
                // 默认显示第几页
                currentPage:1,
                // 总条数x
                totalCount:1,
                // 个数选择器
                pageSizes:[1,2,3,6],
                // 默认每页显示的条数
                PageSize:2,
            }
        },
        methods:{
            ShowMyblog(){
                this.Cid=this.userInfo.id;
                console.log(this)
                this.$axios.post("/api/conten/showblogid",{Cid:this.Cid}).then(res=>{
                    console.log(res)
                    this.blog=res.data.data;
                    this.totalCount=this.blog.length;
                });
            },

            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val
                // 在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
            },
            DeleBlog(id){
                if (confirm("确认删除嘛?")){
                    this.$axios.post("/api/conten/deleblog/" + id).then(res=>{
                        if (res.data.status===1){
                            this.$message.success(res.data.msg);
                       this.ShowMyblog();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                }
            }
        },
        created() {


            this.$axios.get("/api/user/main/info",{headers:{TOKEN:this.token}}).then(res=>{
                this.Cid = this.userInfo.id;
                this.userInfo = res.data.data;
                this.ShowMyblog();//很鸡贼
            });


        }
    }
</script>

<style scoped>

</style>